<template>
  <div id="car-manage-list">
    <!-- <van-nav-bar title="我的会议" left-arrow fixed :border="false" @click-left="$common.backButtonClicked(false)"></van-nav-bar> -->
    <div class="nav-container">
      <van-tabs sticky animated swipeable color="#2E79FF" @click="setSrollTop" v-model="activeTab">
        <van-tab v-for="(item, index) in tabs" :key="`${index}tab页`" :title="item.name">
          <div class="tab-panel" :ref="`tabRef${index}`">
            <van-pull-refresh v-model="refreshLoading" @refresh="getDataListNew(item.data, item.page, item.type, item.finished, item.count, true, false)">
              <img
                slot="loading"
                class="loading-gif-refresh"
                src="../../assets/loading.gif"
              >
              <template v-if="getDataFiled(item.data).length == 0 && getDataFiled(item.finished)">
                <div class="no-data-img">
                  <img src="../../assets/cars/no_data_img.png">
                  <p>暂无派车</p>
                </div>
              </template>
              <van-list
                v-show="getDataFiled(item.data).length > 0"
                v-model="isLoading"
                :finished="getDataFiled(item.finished)"
                finished-text="没有更多数据了"
                @load="getDataListNew(item.data, item.page, item.type, item.finished, item.count, false, false)">
                <div class="reference-card" v-for="(itemInner, indexInner) in getDataFiled(item.data)" :key="`${itemInner.id}列表`" @click.stop="goToDetail(itemInner, 'detailInfo')">
                  <div class='content' :class="{'full-name': itemInner.pic == '0'}">
                    <p class='status-title'>
                      <span>{{ itemInner.arrange_num }}</span>
                      <span class="status-text" :class="returnStatus(itemInner.status)">{{ itemInner.status }}</span>
                    </p>
                    <p class="card-info-item van-ellipsis">
                      <van-icon name="location-o"/> {{ itemInner.destination }}
                    </p>
                    <p class="card-info-item van-ellipsis">
                      <van-icon name="clock-o"/> {{ $common.convertDate(itemInner.arrange_start, 'Y-M-D') }} — {{ $common.convertDate(itemInner.arrange_end, 'Y-M-D') }}
                    </p>
                    <p class="card-info-item van-ellipsis">
                      <van-icon name="user-o"/> {{ itemInner.user_car }}
                    </p>
                    <div v-if="itemInner.status == '预约中' || itemInner.status == '进行中'" class="item-buttons">
                      <van-button @click.stop="changeStatus(itemInner.id, 3)" color="#666666" plain>取消</van-button>
                      <van-button v-if="itemInner.status == '进行中'" @click.stop="changeStatus(itemInner.id, 2)" color="#2E79FF" plain>完成</van-button>
                    </div>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <img class="fixed-add-button" @click="$router.push({name: 'carForm', query: {type: 'new'}})" src="../../assets/cars/add_button.png">
  </div>
</template>

<script type="text/javascript">
  import qs from 'qs'
  export default {
    data() {
      return {
        activeTab: 0,
        tabs: [
          {
            name: '全部',
            type: '', // 状态码
            data: 'dataAll',
            count: 'dataAllCount',
            page: 'dataAllPage',
            finished: 'dataAllFinished'
          },
          {
            name: '进行中',
            type: '1',
            data: 'dataGoing',
            count: 'dataGoingCount',
            page: 'dataGoingPage',
            finished: 'dataGoingFinished'
          },
          {
            name: '已取消',
            type: '2',
            data: 'dataCancel',
            count: 'dataCancelCount',
            page: 'dataCancelPage',
            finished: 'dataCancelFinished'
          },
          {
            name: '已完成',
            type: '3',
            data: 'dataComplete',
            count: 'dataCompleteCount',
            page: 'dataCompletePage',
            finished: 'dataCompleteFinished'
          },
          // {
          //   name: '预约中',
          //   type: '4',
          //   data: 'dataBooking',
          //   count: 'dataBookingCount',
          //   page: 'dataBookingPage',
          //   finished: 'dataBookingFinished'
          // },
        ],
        // newsList: [],
        // newsPage: 1,
        // newsFinished: false,

        // 所有数据需要使用的
        dataAll: [],
        dataAllCount: 1,
        dataAllPage: 0,
        dataAllFinished: false,
        dataCancel: [],
        dataCancelCount: 1,
        dataCancelPage: 0,
        dataCancelFinished: false,
        dataGoing: [],
        dataGoingCount: 1,
        dataGoingPage: 0,
        dataGoingFinished: false,
        dataComplete: [],
        dataCompleteCount: 1,
        dataCompletePage: 0,
        dataCompleteFinished: false,
        dataBooking: [],
        dataBookingCount: 1,
        dataBookingPage: 0,
        dataBookingFinished: false,


        refreshLoading: false,
        isLoading: false,
      }
    },
    activated() {
      this.$bridge.callHandler('navTitle', {title: '派车管理'})
      this.$bridge.registerHandler('navBack', (data, callback) => {
        callback('h5done')
      })
      this.getDataListNew('dataAll', 'dataAllPage', '', 'dataAllFinished', 'dataAllCount', true, true)
      this.getDataListNew('dataGoing', 'dataGoingPage', '1', 'dataGoingFinished', 'dataGoingCount', true, true)
      this.getDataListNew('dataCancel', 'dataCancelPage', '2', 'dataCancelFinished', 'dataCancelCount', true, true)
      this.getDataListNew('dataComplete', 'dataCompletePage', '3', 'dataCompleteFinished', 'dataCompleteCount', true, true)
      
      // // 页面加载时 有查询到记录的删除下标 进行**伪删除**, 并进行下一页查询 不足perpage时 进行数据补全 查询下一页的未读 同时标记当前未读-1 已读+1
      // if(this.$store.state.hasRead > -1) {
      //   this.isRead.unshift(this.$common.deepCopy(this.notRead[this.$store.state.hasRead]))
      //   this.notRead.splice(this.$store.state.hasRead, 1)
      //   this.$store.commit('changeStatus', {key: 'hasRead', value: -1})
      //   this.notReadCount--
      //   this.isReadCount++

      //   if(this.notRead.length < 10) { // 此处不进行初始化查询, count值不会改变
      //     this.getDataListNew('notRead', 'notReadPage', '3', 'notReadFinished', 'notReadCount', false, false)
      //   }
      // }
    },
    mounted() {
      // this.getDataList(true, true)
      // this.getDataListNew('dataAll', 'dataAllPage', '', 'dataAllFinished', 'dataAllCount', true, true)
      // this.getDataListNew('dataGoing', 'dataGoingPage', '1', 'dataGoingFinished', 'dataGoingCount', true, true)
      // this.getDataListNew('dataCancel', 'dataCancelPage', '2', 'dataCancelFinished', 'dataCancelCount', true, true)
      // this.getDataListNew('dataComplete', 'dataCompletePage', '3', 'dataCompleteFinished', 'dataCompleteCount', true, true)
      // this.getDataListNew('dataBooking', 'dataBookingPage', '4', 'dataBookingFinished', 'dataBookingCount', true, true)
    },
    methods: {
      returnStatus(status) {
        let className = "" 
        switch(status) {
          case '进行中':
            className = 'yellow';
            break;
          case '预约中':
            className =  'blue';
            break;
          case '已取消':
            className =  'red';
            break;
          case '已完成':
            className = 'green';
            break;
          default:
            className = 'blue';
            break;
        }
        return className
      },
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
        }, 500);
      },
      setSrollTop() {
        // this.$nextTick(_ => {
        //   switch(this.activeTab) {
        //     case 0:
        //       this.$store.commit('changeStatus', {key: 'scroll0', value: this.$refs.tabRef0[0].scrollTop})
        //       break;
        //     case 1:
        //       this.$store.commit('changeStatus', {key: 'scroll1', value: this.$refs.tabRef1[0].scrollTop})
        //       break;
        //     case 2:
        //       this.$store.commit('changeStatus', {key: 'scroll2', value: this.$refs.tabRef2[0].scrollTop})
        //       break;
        //     case 3:
        //       this.$store.commit('changeStatus', {key: 'scroll3', value: this.$refs.tabRef3[0].scrollTop})
        //       break;
        //     default:
        //       break;
        //   }
        // })
        
      },
      /**
       * 获取列表数据
       * @return {[type]} [description]
       */
      // getDataList(init, showToast) {
      //   let self = this
        
      //   if(init) { //初始化查询
      //     self.newsPage = 1
      //     self.newsFinished = false
      //   }

      //   let config = {
      //     url: `${this.$common.basePath}message/notice.php`,
      //     data: {
      //       do: 'list',
      //       page: self.newsPage++,
      //       type: 'news',
      //       news_type: this.$route.query.type == 1 ? 1 : 5,
      //       user_id: this.$store.state.userId,
      //     },
      //     method: 'POST'
      //   }
      //   if(showToast) {
      //     self.$toast({
      //       duration: 0,
      //       forbidClick: true,
      //       className: 'loading-toast',
      //       icon: require('../../assets/loading.gif'),
      //     })
      //   }
        
      //   if(!self.newsFinished || init) {
      //     self.$axios(config).then(res => {
      //       self.isLoading = false
      //       self.newsList = init ? res.data.data : self.newsList.concat(res.data.data)
      //       if(self.newsList.length >= res.data.count) {
      //         self.newsFinished = true
      //       }
      //       self.refreshLoading = false;
      //       self.$toast.clear()
      //     }).catch(err => {
      //       self.$toast.clear()
      //     })
      //   }
      // },
      /**
       * 输出数据
       * @param  {[type]} dataFiled [description]
       * @return {[type]}           [description]
       */
      getDataFiled(dataFiled) {
        return this[dataFiled]
      },
      getDataListNew(target, page, type, finished, count, init, showToast) {
        let self = this
        
        if(init) { //初始化查询
          self[page] = 1
          self[finished] = false
        }

        let config = {
          url: `${this.$common.basePath}aatp5/public/index.php/message/api_car/listCarWork`,
          data: qs.stringify({
            pageIndex: self[page]++,
            pageSize: 10,
            status: type,
            uid: this.$store.state.userId,
          }),
          method: 'POST'
        }
        if(showToast) {
          self.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
        }
        if(!self[finished] || init) {
          self.$axios(config).then(res => {
            self.isLoading = false
            init ? self[count] = res.data.total : null
            self[target] = init ? res.data.data : self[target].concat(res.data.data)
            if(self[target].length >= res.data.total) {
              self[finished] = true
            }
            self.refreshLoading = false
            self.$toast.clear()
          }).catch(err => {
            self.$toast.clear()
            self[target] = []
            self.isLoading = false
            self[finished] = true
            self.refreshLoading = false
          })
        }
      },
      goToDetail(item) {
        this.$router.push({name: 'carDetail', query: { id: item.id, from:"default" }})
      },
      /**
       * 改变当前派车的状态
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      changeStatus(id, type) {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: type == 2 ? '这次派车已完成?' : '确认取消这次派车?' 
        }).then(_ => {
          this.$bridge.callHandler('cancelNavKeepView')
          this.$axios.post(`${this.$common.basePath}aatp5/public/index.php/message/car_manage/deleteCarWork`, {
            uid: this.$store.state.userId,
            id: id,
            type: type
          }).then(res => {
            //成功后全部刷新列表
            this.$toast({message: res.msg, icon: 'success'})
            setTimeout(_ => {
              this.getDataListNew('dataAll', 'dataAllPage', '', 'dataAllFinished', 'dataAllCount', true, true)
              this.getDataListNew('dataGoing', 'dataGoingPage', '1', 'dataGoingFinished', 'dataGoingCount', true, true)
              this.getDataListNew('dataCancel', 'dataCancelPage', '2', 'dataCancelFinished', 'dataCancelCount', true, true)
              this.getDataListNew('dataComplete', 'dataCompletePage', '3', 'dataCompleteFinished', 'dataCompleteCount', true, true)
            }, 500)
            
          }).catch(err => {
            this.$toast({message: err.msg, icon: 'fail'})
          })
        }).catch(err => {
          this.$bridge.callHandler('cancelNavKeepView')
        })
        
      }
    }
  }
</script>

<style lang="less">
  #car-manage-list {
    & /deep/ .van-tab span {
      font-size: 14px;
    }
    background: #f5f5f5;
    .fixed-add-button {
      height: 56px;
      width: 56px;
      position: fixed;
      bottom: 57px;
      right: 7px;
    }
    .padding-button {
      height: 30px!important;
      padding: 5px 22px 5px 22px!important;
      font-size: 17px!important;
      line-height: 17px!important;
    }
    .tab-panel  {
      -webkit-overflow-scrolling: touch;
      overflow-y: hidden;
      .van-pull-refresh__track {
        min-height: calc(100vh - 94px);
      }
      .van-card {
        padding: 15px;
        background: #fff;
        border-width: 75%;
        border-bottom: 1px solid #f5f5f5;
        margin-top: 0!important;
        .van-card__thumb {
          width: 115px;
          height: 80px;
          margin-right: 15px;
          & .van-image img {
            border-radius: 2px;
          }
        }
        .van-card__content {
          min-height: 80px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
      .card-title {
        font-size: 17px;
        margin: 0;
      }
      .card-desc {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0 0 0;
        font-size: 14px;
        color: #999;
        .name-time {
          display: flex;
          align-items: center;
        }
        .user-name {
          display: inline-block;
          max-width: 80px!important;
          margin-right: 10px;
        }
      }
      .card-footer {
        margin-top: 12px;
      }
    }
    .no-data-img {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 30% 0 30% 0;
      background-color: #f5f5f5;

      img {
        width: 180px;
        height: 106px;
        text-align: center;
      }

      p {
        font-size: 17px;
        color: #333333
      }
    }
    .reference-card {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      border-radius: 8px;
      padding: 10px 0;
      margin: 15px;
      background: #fff;
      &:last-child {
        border-bottom: none;
      }
      .content {
        position: relative;
        width: 100%;
        font-size: 17px;
        &.full-name {
          width: 100%;
        }
        .title {
          margin-top: 0;
          max-height: 48px;
          margin-bottom: 8px;
          width: 100%;
          font-size: 17px;
          font-weight: normal;
          color: #333;
        }
        .status-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0 0 8px 0;
          padding: 0 15px 10px 15px;
          width: calc(100% - 30px);
          font-size: 14px;
          color: #999;
          border-bottom: 1px solid #f5f5f5; 
          .status-text {
            display: inline-block;
            font-size: 15px;
            font-weight: bold;
            &.blue {
              color: #2E79FF;
            }
            &.green {
              color: #02C70D;
            }
            &.red {
              color: #F54B03;
            }
            &.yellow {
              color: #F5A703;
            }
          }
        }
        .card-info-item {
          display: flex;
          align-items: center;
          margin: 10px 0;
          padding: 0 15px;
          font-size: 15px;
          color: #333;
          .van-icon {
            font-size: 17px;
            line-height: 21px;
            margin-right: 10px;
          }
          & span:first-child {
            color: #999;
          }
        }
        .item-buttons {
          text-align: right;
          padding: 0 15px;
          & > .van-button {
            height: 30px;
            width: 70px;
            line-height: 1;
            margin-left: 15px;
          }
        }
      }
      .image {
        margin-left: 15px;
        width: 115px!important;
        border-radius: 2px!important;
         img  {
          width: 115px!important;
          border-radius: 2px;
        }
      }
    }
  }
</style>